/*
 * @Author: gpj
 * @Date: 2023-05-31 10:51:05
 * @LastEditors: Yejing
 * @LastEditTime: 2023-05-31 14:29:22
 * @Description: 修改布局
 */
<template>
	<view class="c-uoload-media-page">
		<view style="position: relative;">
			<view style='margin-bottom: 32rpx;'>{{$t('media.Video')}}</view>
			<view v-if="filePaths" style="position: relative;" :style="{width: width,height: height}">
				<video :src="filePaths" controls :style="{width: width, height: height}"></video>
				<view class="" style="position: absolute;right: 20rpx;top: 20rpx;z-index: 999;" @click="deletevideo">
					<u-icon name="close-circle-fill" color="rgb(225, 228, 232)" size="40"></u-icon>
				</view>
			</view>
			<view style="background: #E1E4E8;border-radius: 30rpx;" class="uploaddiv"
				:style="{width: width,height: height}" v-else @click="videoChoose">
				<image src="@/static/images/shortVideo/upload.png" class="upload">
				</image>
			</view>
		</view>
		<!-- 		<view>
			<button type="primary" :loading="loading" :disabled="disabled" @click="video">选择视频</button>
		</view> -->


		<view>
			<u-popup v-model="show" mode="center" :mask-close-able='false' :width="popWidth" :height="popHeight"
				:border-radius='popRadius'>
				<view class="progress-v">
					<u-circle-progress :active-color="progressColor" :percent="percent">
						<view class="u-progress-content">
							<view class="u-progress-dot">{{percent}}%</view>
							<text class='u-progress-info'>{{$t('media.upPass')}}</text>
						</view>
					</u-circle-progress>
				</view>
				<view class="" @click="cancelUpload()" style="position: fixed;top: 20rpx;right: 20rpx;">
					<u-icon name="close-circle-fill" color="black" size="40"></u-icon>
				</view>
			</u-popup>
		</view>
		<modal :show='modal.show' :content='modal.content' @confirmClick='cancelConfirmClick' @cancelClick='cancelClick'>
		</modal>

	</view>

</template>
<script>
	export default {
		props: {
			// 视频上传模块
			moduleType: {
				type: String,
				default: 'short_video'
			},
			// 视频宽度
			width: {
				default: '400rpx',
				type: String
			},
			// 视频高度
			height: {
				default: '400rpx',
				type: String
			},
			// 上传进度条弹窗宽度
			popWidth: {
				default: '280',
				type: String
			},
			// 上传进度条弹窗高度
			popHeight: {
				default: '280',
				type: String
			},
			// 上传进度条弹窗圆角
			popRadius: {
				default: '30',
				type: String
			}, // 上传进度条颜色
			progressColor: {
				default: '#2979ff',
				type: String
			},

		},
		data() {
			return {
				percent: 0,
				loading: false,
				disabled: false,
				filePaths: null,
				videoWidth: 0,
				show: false,
				videoHeight: 0,
				//提示框
				modal: {
					show: false,
					content: this.$t('media.Cancel upload') + '?'
				},
			}

		},
		created() {
			this.uploadTask = null;
		},
		destroyed() {
			this.uploadTask = null;
		},
		computed: {
			videoUrl() {
				return `${process.uniEnv.appBaseUrl}/api/app/common/upload/${this.moduleType}`
			}
				
		},
		methods: {

			// 选择视频并上传
			videoChoose() {
				uni.chooseVideo({
					maxDuration: 60,
					success: (res) => {
						const duration = res.duration;
						if (duration > 60) {
							uni.showToast({
								title:"The video size is over 60 seconds",
								icon: "none"
							})
							return;
						}
						const tempFilePaths = res.tempFilePath;
						console.log("res:", tempFilePaths);
						this.filePaths = tempFilePaths;
						this.$nextTick(() => {
							this.videoUpload();
						});
					},
					fail: (e) => {
						console.log('选择文件错误：', e);
					}
				})
			},
			videoUpload() {
				try {
					this.uploadTask = uni.uploadFile({
						url: 'http://xuanping.h2bms.cn/api/app/common/upload/uploadVideo', //请根据自己的服务器地址进行编写
						files: [{
							name: 'file',
							uri: this.filePaths
						}],
						header: {
							'Authorization': 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjVhYzAyMWUyLTE3YmYtNGZmNS05MjkyLTk0ZDRiNDkxZDgxMiJ9.cjf_DZVU6NnMENN-LrUkVWmUe0oOEMnI8Vd5pFCdDxZUJK49gxBg8eNHEbAUknQCBBK5HW1Ii6iF7qGynuny5Q'
						},
						success: function(uploadFileRes) {
							console.log('uploadFileRes:', uploadFileRes)
						},
						fail: function(error) {
							console.log('error:', error);
						},
						complete:function(com) {
							console.log('上传成功：', com);
						}
					})
					
										
					console.log("this.uploadTask:", this.uploadTask);
					this.uploadTask.onProgressUpdate(function(taskRes) {
						console.log("taskRes:", taskRes);
						// this.show = true
						// this.percent = taskRes.progress;
						console.log('上传进度：' + taskRes.progress);
						console.log('已经上传的数据长度：' + taskRes.totalBytesSent);
						console.log('预期需要上传的数据总长度：' + taskRes.totalBytesExpectedToSend);
						// if (taskRes.progress == 100) {
						// 	uni.showToast({
						// 		title: this.$t('media.Upload'),
						// 		icon: 'success'
						// 	})
						// 	this.show = false
						// }
					});
				} catch(e) {
					console.log("错误：", e);
				}	
			},
			cancelUpload() {
				this.modal.show = true
			},
			//取消
			cancelClick() {
				this.modal.show = false
			},
			cancelConfirmClick() {
				this.uploadTask.abort()
				this.modal.show = false
				this.show = false
				this.filePaths = ''
				uni.showToast({
					title: this.$t('Cancel upload'),
					icon: 'success'
				})
			},
			// 删除视频
			deletevideo() {
				this.filePaths = ''
			}
		}
	}
</script>
<style lang="scss" scoped>
	.uploaddiv {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 32rpx;

		.upload {
			width: 50rpx;
			height: 50rpx;
		}
	}
	.progress-v {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		height: 100%;
		font-size: 30rpx;
	}
</style>
